<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
    <script src="./vue.js"></script>
</head>

<body>
    <div class="wrap" id="app">
        <div class="title">学生系统</div>
        <div id="form">
            <p>姓名<input v-model="username" id="username" type="text" value="张三123" /></p>
            <p>年龄<input id="age" v-model="age" type="text" value="21" /></p>
            <p>性别
                <select id="gender" v-model="gender">
                    <option>男</option>
                    <option>女</option>
                    <option>你猜</option>
                </select>
            </p>
            <p>
                <input type="button" @click="addUser" value="添加" id="addBtn" />
                <input type="button" @click="sortUsers" value="排序" id="sortBtn" />
            </p>
        </div>
        <table id="table">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr-com></tr-com> -->
                <tr @delfn="delfn" v-for="(item,key) in sdata" :key="key" :k="key" :item="item" is="tr-com"></tr>
            </tbody>
        </table>
    </div>
    <template id="trcom">
        <tr>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.gender}}</td>
            <td @click="del(k)">删除</td>
        </tr>
    </template>
    <script>
        // 以数据驱动视图；
        var sdata = [
            {
                name: "张三",
                age: 20,
                gender: "男"
            },
            {
                name: "李四",
                age: 24,
                gender: "男"
            },
            {
                name: "王五",
                age: 21,
                gender: "男"
            }
        ]

        let trCom = {
            props:['item','k'],
            template: "#trcom",
            methods:{
                del(k){
                    // console.log(k);
                    // 直接发送ajax 删除数据库
                    this.$emit("delfn",k)
                }
            }
        }



        new Vue({
            el: "#app",
            components:{
                trCom
            },
            data: {
                username: "",
                age: "",
                gender: "",
                sdata
            },
            methods: {
                del(key) {
                    this.sdata.splice(key, 1);
                },
                addUser() {
                    let obj = {
                        name: this.username,
                        age: this.age,
                        gender: this.gender
                    }
                    this.sdata.push(obj);
                },
                sortUsers() {
                    this.sdata.sort((a, b) => a.age - b.age);
                },
                delfn(k){
                    // console.log("k",k);
                    this.sdata.splice(k, 1);
                }
            }
        })


    </script>
</body>

</html>